<template>
  <div id="app">
    <van-index-bar :index-list="computedList">
      <!-- 热门部分 -->
      <van-index-anchor index="热门">热门</van-index-anchor>
      <div class="itemlist">
        <template v-for="(item2,index) in cityGroupData?.hotCities" :key="index">
          <div class="hot-item" @click="selectCity(item2)">
            {{item2.cityName}}
          </div>
        </template>
      </div>
      <!-- A-Z城市部分 -->
      <template v-for="(value,key,i) in cityGroupData?.cities" :key="i">
        <van-index-anchor index="2">{{value.group}}</van-index-anchor>
        <template v-for="(item,i) in value.cities" :key="i">
          <van-cell :title="item.cityName" @click="selectCity(item)" />
        </template>
      </template>
    </van-index-bar>
    
  </div>
</template>

<script setup>
import { computed } from "@vue/runtime-core"
import { useRouter } from "vue-router";
import useCityStore from '../../../store/modules/cityStore'

const propsdata = defineProps(['cityGroupData'])
const router = useRouter();
const useCity = useCityStore();

// 动态计算城市右侧边栏的#-A-Z列表
const computedList = computed(() => {
  let list = propsdata.cityGroupData.cities.map(i => i.group);
  list.unshift("#")
  return list
})

// 选择城市,改变仓库中的当前城市数据
const selectCity = (n) => {
  useCity.selectCity = n;
  router.back()
}
</script>
 
<style lang="less" scoped>
.itemlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
  padding-right: 25px;

  .hot-item {
    margin-bottom: 10px;
    width: 70px;
    height: 28px;
    background-color: antiquewhite;
    border-radius: 10px;
    line-height: 28px;
    text-align: center;
  }
}
</style>